<!-- 公共温馨提示弹窗 -->
<template>
	<uni-popup ref="popupRef" type="center" :safe-area="false" :mask-click="false">
		<view class="popup-container" :style="[{ height: scrollHeight }]">
			<view class="popup-content" :style="[{ height: scrollHeight }]">
				<scroll-view class="popup-inner" scroll-y="true">
					<!-- 默认插槽 外部传递提示文案 -->
					<view id="popup-content">
						<slot></slot>
					</view>
				</scroll-view>
				<button class="btn" plain @click="onClickHandler">确认</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref, reactive, defineExpose, nextTick, onMounted, getCurrentInstance, defineEmits, defineProps } from 'vue'
	import { onReady, onLoad } from '@dcloudio/uni-app'
	
	const props = defineProps({
		type: {
			type: Number,
			default: 0,	// 弹窗类型 0 温馨提示 1 系统维护
		}
	})
	
	const popupDataOrg = {
		0: {
			topBg: 'url(https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/henan/activity/ba105276-74e1-4a10-9df4-fe6479a83e36.png) no-repeat left top / 100%, linear-gradient(to bottom, transparent 0%, transparent 442rpx, #fff 442rpx)',
			innerTop: '332rpx'
		},
		1: {
			topBg: 'url(https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/system/11f31e55-2e6b-4b8c-b487-52c6590fb770.png) no-repeat left top / 100%, linear-gradient(to bottom, transparent 0%, transparent 228rpx, #fff 228rpx)',
			innerTop: '270rpx'
		}
	}
	
	// 当前实例
	const instance = getCurrentInstance();
	
	const emits = defineEmits(['onCloseHandler'])
	
	// 弹窗实例
	const popupRef = ref()

	// 弹窗数据
	const popupDataForLess = {
		topBg: 'url(https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/henan/activity/ba105276-74e1-4a10-9df4-fe6479a83e36.png) no-repeat left top / 100%, linear-gradient(to bottom, transparent 0%, transparent 442rpx, #fff 442rpx)',
		innerTop: '332rpx'
	}
	onMounted(() => {
		Object.assign(popupDataForLess,popupDataOrg[props.type])
	})
	
	// 动态滚动区域高度（最高70vh）
	const scrollHeight = ref('70vh')
	
	// 弹框高度（相较于全屏）
	const popupHeight = 0.5

	// 滚动高度处理（动态高度，防止大尺寸手机展示弹窗时，文案不足，底部过多空白问题）
	function scrollHeightHandler(){
		uni.getSystemInfo({
			success: function (res1) {
				const query = uni.createSelectorQuery().in(instance.proxy)
				query.select('#popup-content').boundingClientRect()
				query.exec((res2) => {
					// 最大为系统高度的50%
					if((res1.windowHeight * popupHeight) > res2[0].height){
						scrollHeight.value = `${res2.height}px`
					}else{
						scrollHeight.value = '70vh'
					}
				})
			},
		})
	}
	
	// 关闭点击事件
	function onClickHandler(){
		popupRef.value.close()
		emits('onCloseHandler')
	}
	
	// 打开弹窗
	function open(){
		popupRef.value.open()
		// 滚动高度处理
		nextTick(() => {
			scrollHeightHandler()
		})
	}
	
	// 暴露方法
	defineExpose({
		open,
	})
</script>

<style lang="less" scoped>
	.popup-container{
		@inner-top: v-bind('popupDataForLess.innerTop');
		width: 100vw;
		padding: 0 40rpx;
		box-sizing: border-box;
		.popup-content{
			width: 100%;
			background: v-bind('popupDataForLess.topBg');
			overflow: hidden;
			position: relative;
			padding: 0 40rpx 40rpx 40rpx;
			box-sizing: border-box;
			border-radius: 0 0 24rpx 24rpx;
			.popup-inner{
				margin-top: @inner-top;
				height: calc(100% - 120rpx - @inner-top);	// 452包含按钮高度
				box-sizing: border-box;
				position: relative;
			}
			.btn{
				border: none;
				margin: 30rpx 0 0 0;
				padding: 0;
				width: 100%;
				height: 90rpx;
				background-color: #24C789;
				color: #fff;
			}
		}
	}
</style>